import { reactive } from 'vue'
import { defineStore } from '../manager/state'

interface UiOptions {
  show?: boolean
  title?: string
  content?: string
  showCancel?: boolean
  showConfirm?: boolean
  cancelText?: string
  confirmText?: string
  contentStyle?: Record<string, string> | string
  hideOnBlur?: boolean
  autoClose?: boolean
  cancelHandler?: () => void
  confirmHandler?: () => void
}
interface ToastOptions {
  title?: string
  mask?: boolean
  duration?: number
  icon?: string
}
export interface CustomPopupOptions<T extends Record<string, any> = any> {
  type?: string
  obj?: T
  list?: Array<T>
  hideOnBlur?: boolean
  autoClose?: boolean
  cancelHandler?: () => void
  confirmHandler?: () => void
}
interface NodeJS {
  Timeout: ReturnType<typeof setTimeout>
}
export interface AlertConfig {
  confirmColor: string
  cancelColor: string
}
let maskTimer = null as unknown as NodeJS.Timeout
let loadingTimer = null as unknown as NodeJS.Timeout

export default defineStore(() => {
  return reactive({
    useSys: false,
    show: false,
    mask: false,
    icon: '',
    title: '加载中...',
    duration: 1500,
    maskColor: 'transparent',
    popupConfig: {
      confirmColor: '#007AFF',
      cancelColor: '#f0f0f0',
    },
    // 显示加载框
    toastTimer: null as unknown as NodeJS.Timeout,
    toast(text: string, { mask = false, duration = 2000, icon }: ToastOptions = {}) {
      return new Promise((resolve, reject) => {
        this.mask = mask
        this.show = true
        this.title = text || ''
        if (icon) {
          this.icon = icon
        }
        this.toastTimer && clearTimeout(this.toastTimer)
        this.toastTimer = setTimeout(() => {
          this.show = false
          resolve(true)
        }, duration || this.duration)
      })
    },
    hideToast() {
      clearTimeout(this.toastTimer)
      this.show = false
    },
    showMask() {
      this.show = false
      this.mask = true
    },
    hideMask() {
      this.mask = false
    },
    // 显示加载框
    showLoading(title = '加载中...', { icon, mask = true } = {} as { icon?: string, mask?: boolean }) {
      this.show = true
      this.mask = mask
      if (title) {
        this.title = title
      }
      if (icon) {
        this.icon = icon
      }
    },

    // 隐藏加载框
    hideLoading() {
      this.mask = false
      this.show = false
    },
    showRequestLoading({ title = '加载中...', icon, duration, maskTime, mask = true } = {} as { title: string | undefined, icon?: string, maskTime?: number, duration?: number, mask?: boolean }) {
      this.show = true
      this.mask = mask

      if (title) {
        this.title = title
      }
      if (icon) {
        this.icon = icon
      }
      if (mask && maskTime) {
        maskTimer && clearTimeout(maskTimer)
        maskTimer = setTimeout(() => {
          this.mask = false
        }, maskTime)
      }
      loadingTimer && clearTimeout(loadingTimer)
      loadingTimer = setTimeout(() => {
        this.hideRequestLoading()
      }, duration || this.duration)
    },
    hideRequestLoading() {
      this.mask = false
      this.show = false
      maskTimer && clearTimeout(maskTimer)
      loadingTimer && clearTimeout(loadingTimer)
    },
    // 确认框
    confirm(options: UiOptions) {
      const page = uni.$util.currentPage()?.$vm
      if (!page?.$$muiLayout) return
      page?.$$muiLayout?.openUiBox(options)
      return {
        hasLayout: page?.$$muiLayout,
        close: () => {
          page?.$$muiLayout?.closeUiBox()
        },
      }
    },
    // 单按钮确认框
    alert(options: UiOptions) {
      const page = uni.$util.currentPage()?.$vm
      if (!page?.$$muiLayout) return
      options.showCancel = false
      page?.$$muiLayout?.openUiBox(options)
      return {
        hasLayout: page?.$$muiLayout,
        close: () => {
          page?.$$muiLayout?.closeUiBox()
        },
      }
    },
    customPopup(options: CustomPopupOptions) {
      const page = uni.$util.currentPage()?.$vm
      if (!page?.$$muiLayout) return
      page?.$$muiLayout?.openCustomUiBox(options)
      return {
        hasLayout: page?.$$muiLayout,
        close: () => {
          page?.$$muiLayout?.closeCustomUiBox()
        },
      }
    },
  })
})
// export default function useUi(): IUseUi {
//   const ui: any = {
//     get loaded() {
//       return uni.$util.currentPage()?.$$muiLayout?.loaded
//     },
//   }
//   const keys = ['showLoading', 'hideLoading', 'showToast', 'showMask', 'showConfirm', 'closeConfirm', 'showRequestLoading', 'hideRequestLoading']
//   keys.forEach((k) => {
//     ui[k] = (...args: any[]) => {
//       const d = uni.$util.currentPage()?.$$muiLayout
//       if (d) {
//         d[k]?.(...args)
//       }
//     }
//   })
//   return ui
// }
